<template>
  <div>
    <div class="recommend">
      <div class="title">
        <img class="title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
        <span>猜你喜欢</span>
      </div>
      <ul>

        <router-link tag="li" :to="'/detail/'+item.id" class="item-like-li" v-for="item in recommendList" :key=item.id>
          <div class="item-like ">
            <div class="item-like-imgWrap">
              <img class="item-like-img"
                   :src=item.imgurl>
            </div>
            <div class="item-like-info">
              <p class="item-like-info-title">{{item.infotitle}}</p>
              <p class="item-like-info-content">{{item.infocontent}}</p>
              <div class="item-like-info-price">￥<em class="item-like-info-price-num">{{item.price}}</em>
                <span style="color: #212121;">起</span>
              </div>
            </div>
          </div>
        </router-link>

      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "homeRecommend",
    props:{
      recommendList:Array
    },
    data() {
      return {
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .recommend {
    .title {
      padding .2rem 0 .2rem
      height .44rem
      line-height .44rem
      color #212121
      font-size .32rem

      .title-img {
        margin-left .2rem
        margin-bottom .15rem
        height .3rem
        width .3rem
      }
    }

    .item-like-li {
      margin 0 0.3rem
      border-bottom:0.02rem solid #e0e0e0

      .item-like {
        padding .2rem 0
        display flex

        .item-like-imgWrap {
          .item-like-img {
            width 2rem
            height 2rem
          }
        }

        .item-like-info {
          flex 1
          min-width 0
          padding-left .22rem

          .item-like-info-title {
            margin-top .26rem
            height .44rem
            line-height .44rem
            font-size .32rem
            color #212121
            ellopsis()
          }

          .item-like-info-content {
            margin-top .14rem
            ellopsis()
          }

          .item-like-info-price {
            margin-top .3rem
            font-size .24rem
            color #ff8300

            .item-like-info-price-num {
              font-size .4rem
            }
          }

        }
      }
    }
  }
</style>
